<%--
  Created by IntelliJ IDEA.
  User: kurong
  Date: 2021/10/21
  Time: 19:20
  To change this template use File | Settings | File Templates.
  实现对商品介绍的添加
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

商品Id<input type="text" id="proId">
<div id="div1">

</div>
<button class="update">添加介绍</button>







<%--===================================================       JS      ================================================================--%>



<script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.min.js"
        charset="utf-8"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery/jquery.form.js"
        charset="utf-8"></script>

<script
        type="text/javascript"
        src="${pageContext.request.contextPath}/wangeditor/dist/wangEditor.js"
></script>

<script type="text/javascript">

    const E = window.wangEditor;
    const editor = new E("#div1");
    editor.config.height = 600;
    // editor.config.uploadImgServer = '/uploadImg';
    // 或者 const editor = new E(document.getElementById('div1'))


    //开启debug模式
    editor.config.debug = true;

    // 关闭粘贴内容中的样式
    // editor.config.pasteFilterStyle = false;

    // 忽略粘贴内容中的图片
    // editor.config.pasteIgnoreImg = true;

    // 使用 base64 保存图片
    //editor.config.uploadImgShowBase64 = true


    editor.config.uploadFileName = "file";
    editor.config.uploadImgServer = '${pageContext.request.contextPath}/fileUpload';
    editor.config.debug = true;

    //自定义上传图片事件
    editor.config.uploadImgHooks = {
        before: function (xhr, editor, files) {

        },
        success: function (xhr, editor, result) {
            console.log("上传成功");
        },
        fail: function (xhr, editor, result) {
            console.log("上传失败,原因是" + result);
        },
        error: function (xhr, editor) {
            console.log("上传出错");
        },
        timeout: function (xhr, editor) {
            console.log("上传超时");
        },
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url;
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }

    };

    //
    editor.create();




    $(".update").click(function () {
        // editor.txt.html(text);
        $( 'dt:empty' ).remove();
        $( 'dl:empty' ).remove();
        $( 'em:empty' ).remove();
        $( 'label:empty' ).remove();
        $( 'p:empty' ).remove();
        $( 'div:empty' ).remove();


        $("a").remove();
        $("br").remove();
        $("span").remove();


        //2. 获得富文本数据
        var editorData = editor.txt.html();

        var proId=$("#proId").val();
        console.log("表单数据: " + editorData);
        console.log("proId: " + proId);
        var url = "${pageContext.request.contextPath}/editor/"+proId;


        // var dataType = "string";
        //3. 产生ajax请求
        //  $.post(url,formData,"成功回调", dataType);


        $.ajax({
            type: "put",
            url: "${pageContext.request.contextPath}/editor/" + proId,
            dataType: "html",
            data:{
                "editorData" : editorData
            },
            success: function (result) {
                if (result.data !== null) {
                    console.log("data: "+result.data);
                    console.log("result: "+JSON.stringify(result));
                    alert(result.reason);
                } else {
                    alert(result.reason);

                }
            },
            error:function (result) {
                console.log("333");


            }
        });

        //
        // $.post(
        //     url,
        //     editorData,
        //     function (result) {
        //         alert(result.reason);
        //     },
        //     dataType
        // );
        //4. 获得服务器返回数据: 添加成功/添加失败 消息提示

    })
</script>

</body>
</html>
